import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import TitleText from '../TitleText';
import { Image } from 'components/atoms';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useSelector, useDispatch } from 'react-redux';
import Autoplay from '../Autoplay';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        height: '100%',
        zIndex: 'auto',
    },
    titleText: {
        display: "none",
        [theme.breakpoints.up('md')]: {
            display: "block",
        },
    },
    swiperSlide: {
        width: 'auto',
        paddingTop: "20px",
        background: "linear-gradient(150deg, rgb(10, 10, 10, 0.60) 30%, rgb(30, 30, 30, 0.20) 50%, rgb(10, 10, 10, 0.60) 70%)",
        height: "400px",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        cursor: "pointer",
        [theme.breakpoints.up('md')]: {
            height: "400px",
        },
    },
    swiperImageSlide: {
        width: "80%",
        height: "300px",
        [theme.breakpoints.up('md')]: {
            height: "300px",
        },
    },
    image: {
        objectFit: 'cover',
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "24px",
        fontStyle: "normal",
        fontWeight: 400,
        textTransform: "uppercase",
        color: "#fff",
        marginTop: "20px",
        [theme.breakpoints.up('md')]: {
            fontSize: "30px",
        },
    },
    card: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column"
    }
}));

const StreamLeaders = () => {
    const classes = useStyles();
    const history = useHistory()

    const StreamLeadersData = useSelector((state) => state.cover.discovers?.top_artists);

    console.log(StreamLeadersData)

    const moveDetailPage = (link) => {
        history.push(`${link}`)
    }

    return (
        <div className={classes.root}>
            <div className={classes.titleText}>
                <TitleText text={"stream leaders"} />
            </div>

            <Swiper
                slidesPerView={3}
                spaceBetween={0}
                loop={true}
                autoplay={{
                    delay: 5000,
                    disableOnInteraction: false,
                }}
                breakpoints={{
                    320: {
                        slidesPerView: 1,
                    },
                    990: {
                        slidesPerView: 3,
                    },
                }}
                navigation={{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }}
                modules={[Autoplay]}
            >
                {StreamLeadersData && StreamLeadersData.map((item, index) => (
                    <SwiperSlide
                        className={clsx(
                            'swiper-image__slide',
                            'swiper-slide',
                            classes.swiperSlide,
                        )}
                        key={index}
                    >
                        <div className={classes.card} onClick={() => moveDetailPage(item.listen_link)}>
                            <div className={classes.swiperImageSlide} >
                                <Image
                                    src={item.photoURL}
                                    alt={item.photoURL}
                                    srcSet={item.photoURL}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                    className={clsx(
                                        'swiper-image__item',
                                        classes.image,
                                    )}
                                />
                            </div>
                            <Typography className={classes.typography}>
                                {item.sub_title}
                            </Typography>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div >
    )
}


StreamLeaders.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default StreamLeaders
